<template>
	<view class="box">
		<!-- <view class="address" @click="getaddress">
			使用当前地址
		</view> -->
		<view class="list">
			<text class="left">{{$t('myAddress.currentAddress')}}</text> <text class="country"></text><image src="../../static/get/go.png" mode=""></image>
		</view>
		
		<view class="list" @click="getAddress(show=true)">
			<text class="left">{{$t('myAddress.detailedAddress')}}</text> <text class="country"></text><image src="../../static/get/go.png" mode=""></image>
		</view>
		<wenjuan type='local'
		         @change="changes($event)"
				 :defaultValue="address"
				class="countrys"
		></wenjuan>
		
		<!-- <wenjuan type='region' 
		         @change="change($event)"
				class="wenjuan"
		></wenjuan> -->
		<view v-show="show">
	<textarea value="" :placeholder="$t('myAddress.inpDetaileAddress')" class="text" maxlength="500" @input="descinp" v-model="desc" />
	<view class="num">{{num}}/500</view>
		<view class="btn">
		<button type="default" class="no" @click="back(show=false)">{{$t('myAddress.calcel')}}</button>
		<button type="default" class="sure" @click="getContent">{{$t('myAddress.sure')}}</button>
		</view>
		</view>
	</view>
</template>

<script>
	import wenjuan from '@/components/gwh-wenjuan/gwh-wenjuan.vue'
	export default {
		components:{
			wenjuan
		},
		data() {
			return {
				address:'中国-陕西-西安',
				show:false,
				num:0,
				desc:''
			}
		},
		methods: {
			getAddress(){
				console.log(222);
			},
			changes(e){
				console.log(e[0]);
			},
			getContent(){
				this.show=false;
				console.log(this.desc);
			},
			descinp(e){
				this.num=e.detail.value.length
				console.log(e.detail.value.length);
			}
		}
	}
</script>

<style scoped>
.box{
	height: 94.6vh;
	background-color: #F3F3F3;
	}
	.address{
		width: 100%;
		height: 100rpx;
		line-height: 50px;
		color: #1890FF;
		background-color: #FFFFFF;
		padding-left: 50rpx;
		margin-bottom: 30rpx;
	}
	.left{
		font-weight: bold;
	}
	.list{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
		padding-left: 50rpx;
		position: relative;
		margin-bottom: 2rpx;
	}
	.country{
		position: absolute;
		right: 140rpx;
		color: #D5CFFF;
	}
	image{
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		right: 100rpx;
		top: 40rpx;
	}
	.countrys{
		width: 380rpx;
		position: relative;
		top: -184rpx;
		left: 310rpx;
	}
	.wenjuan{
		width: 380rpx;
		position: relative;
		top: -164rpx;
		left: 280rpx;
	}
.text{
	background-color: #FFFFFF;
	margin: auto;
	width: 96%;
}
.num{
	float: right;
	padding-right: 40rpx;
	padding-top: 20rpx;
	margin: 20rpx 0;
}
.btn{
	width: 96%;
	margin:40rpx auto;
	display: flex;
}
.no{
	width: 240rpx;
	height: 60rpx;
	line-height: 60rpx;
}
.sure{
	width: 240rpx;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #1890FF;
}
</style>
